<template>
   <div class="cnyzs-common-TopUpMoney" :class="{ hideAlanoneupLogin: state.isShow }" @click="clickOut">
      <div class="loginContent" :class="{ loginContenthide: state.isShow }">
         <div class="zzz">
            <div class="TopUpMoney-left">
               <div class="left-header">
                  <div class="image">
                     <img :src="userinfo.useravatar" alt="">
                  </div>
                  <div class="name">{{ userinfo.username }}</div>
                  <div class="money">
                     <span class="iconfont icon-qianbao5"></span>
                     <span class="number">{{ userinfo.money }}</span>
                  </div>
                  <div class="kamiinput GradientAnimation" v-show="orderForm.paymode === 'kami' && ispayorvip === 0">
                     <input type="text" v-model="orderForm.kami" placeholder="请输入余额卡">
                  </div>
               </div>
               <div class="left-content">
                  <div class="box">
                     <div class="box-title">
                        <div class="title-name" :class="{ titleActive: ispayorvip === 0 }" @click="ispayorvip = 0">充值金币
                        </div>
                        <div class="title-name" :class="{ titleActive: ispayorvip === 1 }" @click="ispayorvip = 1">开通大会员
                        </div>
                        <div class="x"></div>
                     </div>
                     <!-- 充值余额选项 -->
                     <div class="box-content GradientAnimation" v-if="ispayorvip === 0">
                        <div class="payitem" v-for="(item, index) in payitem.slice(0, 4)" :key="index"
                           :class="{ payitemActive: payitemActive === index }" @click="payitemClick(item, index)">
                           <div v-if="!item?.payDiy" style="display: flex;flex-direction: column;align-items: center;">
                              <div class="payitem-number">{{ item.amount }} {{ cnyzs.COMMON_CURRENCY }}</div>
                              <div class="payitem-price">￥{{ item.paymentAmount }}</div>
                              <div class="payitem-remark">{{ item.show }}</div>
                           </div>
                           <div v-if="item?.payDiy" style="display: flex;flex-direction: column;align-items: center;">
                              <div class="payitem-number">自定义充值</div>
                              <div class="payitem-price">
                                 <input type="number" v-model="orderForm.paymentAmount" placeholder="输入金额">
                              </div>
                              <div class="payitem-remark">1金额 : {{ item.payRatio }}{{ cnyzs.COMMON_CURRENCY }}</div>
                           </div>
                        </div>
                     </div>
                     <!-- 开通会员选项 -->
                     <div class="box-content GradientAnimation" v-if="ispayorvip === 1">
                        <div class="payitem" v-for="(item, index) in vipitem.slice(0, 4)" :key="index"
                           :class="{ vipitemActive: vipitemActive === index }" @click="vipitemClick(item, index)">
                           <div class="payitem-number">{{ item.vipnumber }} 天</div>
                           <div class="payitem-price" style="flex-direction: unset;">
                              <span class="iconfont icon-qianbao5"></span>
                              <span class="num">{{ item.paymentAmount }}</span>
                           </div>
                           <div class="payitem-remark">超划算</div>
                        </div>
                     </div>
                     <div class="box-confirm-payment" v-if="ispayorvip === 0">
                        <div class="confirm-payment-left">{{ cnyzs.COMMON_PAY_DESCR }}</div>
                        <div class="confirm-payment" @click="confirmPayment">确认充值</div>
                     </div>
                     <div class="box-confirm-payment" v-if="ispayorvip === 1">
                        <div class="confirm-payment-left">
                           开通大会员
                        </div>
                        <div class="confirm-payment" @click="confirmPayment">确认开通</div>
                     </div>
                     <div class="box-else">

                     </div>
                  </div>
               </div>
            </div>
            <div class="TopUpMoney-right GradientAnimation" v-if="ispayorvip === 0">
               <div class="right-box-top">

               </div>
               <div class="right-box-commodity">
                  <div class="commodity-item">
                     <span class="name">充值{{ cnyzs.COMMON_CURRENCY }}：</span>
                     <span class="text">{{ orderForm.amount }}</span>
                  </div>
                  <div class="commodity-item">
                     <span class="name">支付金额：</span>
                     <span class="text">￥{{ orderForm.paymentAmount || 0 }}</span>
                  </div>
                  <div class="commodity-item">
                     <span class="name">支付方式：</span>
                     <span class="text">{{ orderForm.paymodename }}</span>
                  </div>
                  <div class="commodity-item">
                     <span class="name"></span>
                     <span class="text" style="color: #999;">{{ orderForm.orderNumber }}</span>
                  </div>
               </div>
               <div class="pay-mode" v-if="cnyzs.COMMON_IS_PAY">
                  <div class="pay-mode-item" v-for="(item, index) in paymode" :key="index"
                     @click="paymodeClick(item, index)" :style="[
                        { backgroundColor: item.color },
                        { opacity: item.disabled === true ? '1' : '.2' },
                        { border: paymodeActive === index ? `2px solid ${'#F35F03'}` : '2px solid #00000000' },
                        { boxShadow: paymodeActive === index ? `0 0 11px 0 ${'#F35F03'}` : '0 0 0 0 #00000000' },
                        { backgroundColor: paymodeActive === index ? '#F35F03' : item.color }
                     ]">
                     <span :class="`${item.icon}`"></span>
                     <span>{{ item.name }}</span>
                  </div>
               </div>
            </div>

            <div class="TopUpMoney-right GradientAnimation" v-if="ispayorvip === 1">

            </div>

         </div>
      </div>
   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus';
const { cnyzs, openMoney } = storeToRefs(cnyzsCommonpinia())
const { userinfo } = storeToRefs(cnyzsUserpinia())
const ispayorvip = ref(0)

// 支付订单
const orderForm = ref({
   amount: 0,  // 充值金币
   paymentAmount: 0, // 支付金额
   paymode: '',       // 支付类型
   paymodename: '',   // 支付类型名称
   payId: '', // 充值选项ID 时间戳
   orderNumber: '',   // 订单号
   kami: '', // 卡密
})
// 生成订单号
const createOrderNumber = () => {
   const date = new Date();
   const year = date.getFullYear().toString();
   const month = (date.getMonth() + 1).toString().padStart(2, '0');
   const day = date.getDate().toString().padStart(2, '0');
   const hours = date.getHours().toString().padStart(2, '0');
   const minutes = date.getMinutes().toString().padStart(2, '0');
   const seconds = date.getSeconds().toString().padStart(2, '0');
   const orderNumber = cnyzs.value.COMMON_ORDERNUMBER_PREFIX + year + month + day + hours + minutes + seconds;
   orderForm.value.orderNumber = orderNumber
}
createOrderNumber()

// 充值金币选项
const payitem = ref(cnyzs.value.COMMON_PAY)
const payitemActive = ref(0)
const payitemClick = (item: any, index: number) => {
   payitemActive.value = index
   orderForm.value.payId = item.payId // 充值选项ID
   if (!item.payDiy) {
      orderForm.value.amount = item.amount // 充值金币
      orderForm.value.paymentAmount = item.paymentAmount // 支付金额
   } else {
      // orderForm.value.amount = 0 // 充值金币
      // orderForm.value.paymentAmount = 0 // 支付金额
   }
}
payitemClick(payitem.value[0], 0) // 默认充值金币选项

// 开通会员选项
const vipitem = ref(cnyzs.value.COMMON_VIP)
const vipitemActive = ref(0)
const vipitemClick = (item: any, index: number) => {
   vipitemActive.value = index
}

// 支付方式
const paymode = ref(cnyzs.value.COMMON_PAY_MODE)
const paymodeActive = ref(0)
const paymodeClick = (item: any, index: number) => {
   if (paymode.value[index].disabled === false) {
      // paymodeActive.value = -1
      // orderForm.value.paymode = ''
      // orderForm.value.paymodename = '未选择'
      return
   } else {
      paymodeActive.value = index
      orderForm.value.paymode = item.type
      orderForm.value.paymodename = item.name 
   }
}
paymodeClick(paymode.value[0], 0) // 默认支付方式




// 监听支付金额：计算充值金币
watch(() => orderForm.value.paymentAmount, (nValue, oValue) => {
   payitem.value.forEach((v: any, index: number) => {
      if (v.payId === orderForm.value.payId && v.payDiy) {
         const num = Number(v.payRatio) * Number(nValue)
         orderForm.value.amount = num
      }
   });
})



// 确认支付
const confirmPayment = async () => {
   if (orderForm.value.paymode === '') return ElMessage.warning('请选择支付方式')
   if (orderForm.value.paymode === 'kami' && orderForm.value.kami === '') return ElMessage.warning('请输入卡密')

   const res: any = await cnyzsRequest('/api/cnyzs-pay-order/create', {
      method: 'POST',
      data: orderForm.value
   })
   if (res.status !== 200) {
      return ElMessage.error(res.message)
   }
   ElMessage.success(res.message)
   userinfo.value.money = Number(orderForm.value.amount) + Number(userinfo.value.money)
   // console.log(res);





}















const state = ref({ isShow: false })
// 关闭登录框
const clickOut = (e: MouseEvent) => {
   const target = e.target as HTMLElement
   if (target.className === 'cnyzs-common-TopUpMoney') {
      state.value.isShow = true
      setTimeout(() => { openMoney.value = false; state.value.isShow = false }, 290)
   }
}

</script>
<style lang="scss" scoped>
.cnyzs-common-TopUpMoney {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 2000;
   background-color: rgba(0, 0, 0, 0.4);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   overflow: hidden;
   animation: show 0.3s ease-in-out;
   padding: 0 18px;

   .loginContent {
      width: 800px;
      height: 550px;
      padding: 25px 30px;
      border-radius: 15px;
      overflow: hidden;
      animation: loginContentshow-7e411725 0.3s ease-in-out;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // border: 2px solid #fff;
      background: rgba(255, 255, 255, 0.9);
      -webkit-backdrop-filter: blur(30px);
      backdrop-filter: blur(30px);
      background-color: #f9f9f9;
      background-image: url('https://static-s.iqiyi.com/qimages/imagepool/b72b0c69d0844dbfa1e2f58bbdc6e6d7_lightbg.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      background-size: cover;
      box-shadow: 0 0 40px 0 rgba(58, 58, 58, 0.585);
      position: relative;

      .zzz {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         // background: linear-gradient(45deg, rgb(255 255 255), rgb(255 255 255 / 63%));
         background: linear-gradient(45deg, rgb(255, 255, 255), rgb(255 255 255 / 0%));
         font-size: 16px;
         display: flex;
         // flex-direction: column;
         padding: 20px;

         .TopUpMoney-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-right: 20px;

            .left-header {
               width: 100%;
               height: 40px;
               margin-bottom: 15px;
               display: flex;
               align-items: center;

               .image {
                  width: 40px;
                  height: 40px;
                  border-radius: 600px;
                  background-color: #EEE;
                  margin-right: 15px;
                  overflow: hidden;
                  box-shadow: 0 0 40px 0 #949494;

                  img {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                  }
               }

               .name {
                  font-size: 20px;
                  color: #777;
                  margin-right: 20px;
               }

               .money {
                  display: flex;
                  align-items: center;
                  margin-right: 20px;

                  .iconfont {
                     font-size: 25px;
                     color: #F35F03;
                     margin-right: 10px;
                  }

                  .number {
                     font-size: 18px;
                     color: #999999;
                  }
               }

               .kamiinput {
                  flex: 1;

                  input {
                     width: 100%;
                     height: 40px;
                     border: 0;
                     font-size: 16px;
                     background-color: #FFF;
                     border-bottom: 1px solid #f5f6f7;
                     border-radius: 4px;
                     caret-color: var(--aoir-color-primary-2);
                     padding: 0 10px;
                     border-radius: 15px;
                     box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

                     &::placeholder {
                        color: #CCD0DB;
                     }
                  }
               }
            }

            .left-content {
               flex: 1;
               // background-color: #d0d0d079;
               // padding: 10px 20px 20px;

               .box {
                  width: 100%;
                  height: 100%;
                  background-color: #FFF;
                  border-radius: 20px;
                  box-shadow: 0 0 2px 0 #4b4b4b16;
                  display: flex;
                  flex-direction: column;
                  overflow: hidden;


                  .box-title {
                     width: 100%;
                     height: 80px;
                     display: flex;
                     justify-content: space-around;
                     align-items: center;
                     padding: 0 20px;
                     position: relative;

                     .x {
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 90%;
                        height: 1.5px;
                        background: linear-gradient(to right, rgba(255, 255, 255, 0.859), #e7e7e7, rgb(255 255 255 / 0%));
                     }

                     .title-name {
                        font-size: 20px;
                        color: #d2d2d2;
                        cursor: pointer;
                        transition: all .3s;

                        &:hover {
                           transform: scale(1.2);
                           color: #F35F03;
                           opacity: .5;
                        }
                     }

                     .titleActive {
                        color: #F35F03;
                     }

                  }

                  .box-content {
                     padding: 20px 20px 15px;
                     display: flex;

                     .payitem {
                        width: 123px;
                        height: 150px;
                        border-radius: 10px;
                        background-color: #F7F7F7;
                        margin-right: 10px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        // padding: 20px;
                        border: 2px solid #ffc10700;

                        cursor: pointer;
                        transition: all .1s ease-in-out;

                        &:nth-child(4n) {
                           margin: 0;
                        }

                        .payitem-number {
                           font-size: 14.5px;
                           margin-bottom: 10px;
                        }

                        .payitem-price {
                           font-size: 28px;
                           font-weight: 900;
                           color: #F35F03;
                           color: #707070;
                           display: flex;
                           flex-direction: column;
                           align-items: center;

                           .iconfont {
                              font-size: 25px;
                              margin-right: 7px;
                              color: #F35F03;
                           }

                           .num {
                              font-size: 20px;
                           }

                           input {
                              width: 80%;
                              height: 37px;
                              border: 0;
                              font-size: 14px;
                              background-color: #FFF;
                              border-bottom: 1px solid #f5f6f7;
                              border-radius: 4px;
                              caret-color: var(--aoir-color-primary-2);
                              padding: 0 10px;
                              border-radius: 10px;
                              box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

                              &::placeholder {
                                 color: #CCD0DB;
                              }
                           }
                        }

                        .payitem-remark {
                           margin-top: 20px;
                           color: #00000080;
                           font-size: 14px;
                        }
                     }

                     .payitemActive {
                        border: 2px solid #F35F03;
                        box-shadow: 0 0 11px 0 #f35f037d;
                        background-color: #ffebd5;

                        .payitem-price {
                           color: #F35F03;
                        }

                        .payitem-remark {
                           color: #F35F03;
                        }
                     }

                     .vipitemActive {
                        border: 2px solid #f32f03;
                        box-shadow: 0 0 11px 0 #f32f0385;
                        background-color: #ffd6d5;

                        .payitem-price {
                           color: #f32f03;

                           .iconfont {
                              color: #f32f03;
                           }
                        }

                        .payitem-remark {
                           color: #f32f03;
                        }
                     }
                  }

                  .box-confirm-payment {
                     padding: 0px 20px 15px;
                     width: 100%;
                     display: flex;

                     .confirm-payment-left {
                        flex: 1;
                        color: #aaa;
                        font-size: 13px;
                     }

                     .confirm-payment {
                        width: 123px;
                        padding: 10px 15px;
                        background-color: var(--aoir-color-primary);
                        border-radius: var(--aoir-border-radius);
                        display: flex;
                        justify-content: center;
                        color: #FFF;
                        font-weight: 900;
                        border: 2px solid var(--aoir-color-primary);
                        box-shadow: var(--aoir-color-primary) 0px 0px 11px 0px;
                        margin-left: 20px;
                        cursor: pointer;
                        transition: all .3s;

                        &:hover {
                           opacity: .7;
                        }
                     }

                  }

                  .box-else {
                     flex: 1;
                     width: 100%;
                     height: 100%;
                     background-color: #f7f7f7;
                     position: relative;

                     &::before {
                        content: "广告预留位";
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        padding: 4px 8px;
                        color: #999;
                        background-color: #ffffff4c;
                        font-size: 12px;
                        border-radius: 6px;
                     }

                  }
               }
            }

         }

         .TopUpMoney-right {
            width: 200px;
            height: 100%;
            display: flex;
            flex-direction: column;

            .right-box-top {
               flex: 1;
               margin: 0 auto;
               // margin-bottom: 20px;
               // background: var(--aoir-color-primary);
               // display: flex;
               // justify-content: center;
               // align-items: center;
               // border-radius: 10px;
               // color: #FFF;
               // box-shadow: var(--aoir-color-primary) 0px 0px 11px 0px;
               // cursor: pointer;
            }

            .right-box-commodity {
               width: 100%;
               display: flex;
               flex-direction: column;
               justify-content: center;
               border: 1.5px dashed rgb(72 72 72 / 16%);
               margin-bottom: 15px;
               background: rgba(255, 255, 255, 0.7019607843);
               border-radius: 15px;
               padding: 8px 10px;

               .commodity-item {
                  display: flex;
                  align-items: center;
                  margin-bottom: 5px;

                  &:nth-last-child(1) {
                     margin-bottom: 0px;
                  }

                  .name {
                     font-size: 13px;
                     color: #999;
                  }

                  .text {
                     font-size: 13px;

                  }
               }
            }

            .pay-mode {
               width: 100%;

               .pay-mode-item {
                  width: 150px;
                  padding: 7px 15px;
                  margin: 0 auto 11px;
                  background-color: var(--aoir-color-primary);
                  display: flex;
                  align-items: center;
                  border-radius: 8px;
                  color: #FFF;
                  cursor: pointer;
                  border: 2px solid #00000000;

                  .iconfont {
                     margin-right: 15px;
                  }

                  &:nth-last-child(1) {
                     margin-bottom: 0 !important;
                  }

                  &:hover {
                     opacity: .3;
                  }
               }

            }
         }

      }
   }



   .loginContenthide {
      animation: loginContenthide 0.3s ease-in-out;
   }

   @keyframes loginContentshow {
      0% {
         opacity: 0;
         transform: translateY(-10%);
      }

      100% {
         opacity: 1;
         transform: translateY(0);
      }
   }

   @keyframes loginContenthide {
      0% {
         opacity: 1;
         transform: translateY(0);
      }

      100% {
         opacity: 0;
         transform: translateY(-10%);
      }
   }

}

@keyframes show {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.hideAlanoneupLogin {
   animation: hide 0.3s ease-in-out;
}

@keyframes hide {
   0% {
      opacity: 1;

   }

   100% {
      opacity: 0;
   }
}



button {
   border: 0;
   padding: 6px 14px;
   background-color: var(--aoir-color-primary);
   color: #FFF;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s;
   display: flex;
   align-items: center;
   box-shadow: 0 0 5px 0 rgba(74, 74, 74, 0.141);
   margin-right: 15px;
   font-size: 14px;
   font-weight: 700;
}
</style>